<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="//at.alicdn.com/t/font_2913324_efeavaorrmi.css">
</head>
<body>
<i class="iconfont icon-home"></i>
<i class="iconfont icon-homefill"></i>

</body>
<!--// const srcName = "ttt"-->
<!--// {"srcName": "123"}-->
<!--// {srcName: "123"}-->

// <IconFont srcName="icon-homefill" />


<script>
  // ["srcName"]
  const IconFont = {
    template: "<i class='iconfont' :class='[srcName]' :style='{fontSize: standardSize}'></i>",
    props: {
      srcName: {
        type: String,
        required: true
      },
      size: {
        type: [String, Number],
        default: 16
      }
    },
    computed: {
      standardSize() {
        if (typeof this.size === 'number') {
          return this.size + "px"
        } else {
          //
          return this.size.endsWith("px") ? this.size : this.size + "px"
        }
      }
    }
  }


</script>
</html>